<!--
 * @Descripttion: 模具二维码
 * @LastEditors: xzh
 * @LastEditTime: 2023-09-13 20:36:24
-->
<template>
  <DileLayer
    v-model="moldQrCodeParma.visible"
    :layerWidth="500"
    :miniW="500"
    :layerHeight="400"
    :footerVisible="false"
    :title="$t('page.moldManageArr.moldArchivesArr.qrCode')"
  >
    <div id="qrCode-container" v-loading="moldQrCodeParma.loading">
      <table cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <label>{{ $t("page.moldManageArr.moldArchivesArr.name") }}</label>
          </td>
          <td colspan="2">
            <span> {{ moldQrCodeParma.moldInfo.name }} </span>
          </td>
        </tr>
        <tr>
          <td>
            <label>{{ $t("page.moldManageArr.moldArchivesArr.code") }}</label>
          </td>
          <td>
            <span> {{ moldQrCodeParma.moldInfo.code }} </span>
          </td>
          <td rowspan="4" class="qrCode-td">
            <QrcodeVue
              :value="moldQrCodeParma.moldInfo.code"
              :size="120"
              render-as="svg"
            />
          </td>
        </tr>
        <tr>
          <td>
            <label>{{
              $t("page.moldManageArr.moldArchivesArr.specification")
            }}</label>
          </td>
          <td>
            <span> {{ moldQrCodeParma.moldInfo.specification }} </span>
          </td>
        </tr>
        <tr>
          <td>
            <label>{{ $t("page.moldManageArr.moldType") }}</label>
          </td>
          <td>
            <span> {{ moldQrCodeParma.moldInfo.extJson?.typeName }} </span>
          </td>
        </tr>
        <tr>
          <td>
            <label>{{ $t("page.systemManageArr.position") }}</label>
          </td>
          <td>
            <span>
              {{ moldQrCodeParma.moldInfo.extJson?.positionName }}
            </span>
          </td>
        </tr>
      </table>
    </div>
    <template #footer>
      <div class="qrCode-footer">
        <el-button text @click.stop="moldQrCodeParma.visible = false">{{
          $t("common.cancel")
        }}</el-button>
        <el-button type="success" @click="handlePrint">
          {{ $t("common.print") }}
        </el-button>
      </div>
    </template>
  </DileLayer>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from "vue";
import { object_Inf } from "@/utils/typings/index.type";
import DileLayer from "@/components/dile-layer/index.vue";
import Dile_APi from "@/api";
import QrcodeVue from "qrcode.vue";
import printJs from "print-js";

/**
 * @Author: xzh
 * @Descripttion: 模具二维码参数
 * @Param:
 */
let moldQrCodeParma = reactive<object_Inf>({
  visible: false,
  loading: false,
  moldInfo: {},
});

/**
 * @Author: xzh
 * @Descripttion: 初始化
 * @Param:
 */
let init = (id: number) => {
  Object.assign(moldQrCodeParma, {
    visible: true,
    moldInfo: {},
  });
  //加载模具信息
  initMoldInfo(id);
};

/**
 * @Author: xzh
 * @Descripttion: 加载模具信息
 * @Param:
 * @param {*} id
 */
let initMoldInfo = async (id: number) => {
  let { loading, moldInfo } = toRefs(moldQrCodeParma);
  try {
    loading.value = true;
    moldInfo.value = await Dile_APi.getMoldArchivesInfo(id);
  } finally {
    loading.value = false;
  }
};

/**
 * @Author: xzh
 * @Descripttion: 打印
 * @Param:
 */
let handlePrint = () => {
  printJs({
    printable: "qrCode-container",
    type: "html",
    targetStyles: ["*"],
  });
};

defineExpose({
  init,
});
</script>
<style lang="scss" scoped>
#qrCode-container {
  padding: 1rem;
  &,
  table {
    height: 100%;
    width: 100%;
  }
  table {
    border-collapse: collapse;
    td {
      border: 1px solid var(--theme-icon);
      text-align: left;
      padding: 0 0.5rem;
      height: 3rem;
      max-width: 15rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &:is(.qrCode-td) {
        width: 9.4rem;
        height: 12rem;
        text-align: center;
      }
      &:first-child {
        text-align: center;
      }
      span {
        font-weight: 700;
        font-size: 14px;
      }
      label {
        font-size: 14px;
        font-weight: 400;
        color: var(--el-text-color-regular);
      }
    }
  }
}
.qrCode-footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}
</style>
